<template>
  <el-dialog
    title="门店位置图"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <span>{{marker.title}}</span>
    <div class="amap-wrapper">
      <el-amap class="amap-box" :vid="'amap-vue'" :zoom="zoom" :center="marker.position" >
        <el-amap-marker :position="marker.position" :title="marker.title"></el-amap-marker>
      </el-amap>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
  </el-dialog>
</template>


<script>
export default {
  name: 'StoreMap',
  data() {
    return {
      dialogVisible: false,
      zoom: 16,
      zooms: [16, 22],
      marker:{
        title:'',
        position:[]
      }
    }
  },
  methods: {
    handleClose(done) {
      this.dialogVisible=false
      this.$emit('close')
    },
    show(dialogVisible,data){
      this.dialogVisible=dialogVisible
      this.marker.title=data.row.storeName
      this.marker.position=[data.row.position.split(',')[0],data.row.position.split(',')[1]]
    }
  }
}
</script>
<style scoped lang="scss">
.amap-wrapper {
  width: 100%;
  height: 500px;
}
.amap-box {
  height: 100%;
}
</style>
